import React, { Component } from "react";
import { Form, Icon, Input, Button, message } from "antd";
import {Redirect} from 'react-router-dom'

import "./index.less";
import logo from "../../assets/images/logo.png";
import { reqLogin } from "../../api";
import memoryUtil from '../../utils/memoryUtil'
import storageUtil from "../../utils/storageUtil";

class Login extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        let { username, password } = values;
        let result = await reqLogin(username, password);
        let status = result.status;
        if (status === 0) {//成功
					memoryUtil.user = result.data || {};
          storageUtil.saveUser(result.data);
					message.success('登陆成功');
					this.props.history.replace('/');
        } else {
					message.error(result.msg);
        }
      } else {
        console.log("参数有误");
      }
    });
  };

  validatorPassword = (rule, value, callback) => {
    if (!value) {
      callback("必填项");
    } else if (value.length < 4) {
      callback("最少4位");
    } else if (value.length > 12) {
      callback("不超过12位");
    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
      callback("只能由下英文字母、数字0和下划线组成");
    } else {
      callback();
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    let user = memoryUtil.user;
    if(user && user._id) {
      return <Redirect to="/" />
    }
    return (
      <div className="wrapper">
        <header className="login-header">
          <img src={logo} alt="logo" />
          <h1>React项目: 后台管理系统</h1>
        </header>
        <section className="login-content">
          <h2>用户登陆</h2>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("username", {
                rules: [
                  { required: true, message: "必填项" },
                  { min: 4, message: "最少4位" },
                  { max: 12, message: "不超过12位" },
                  {
                    pattern: /^[a-zA-Z0-9_]+$/,
                    message: "只能由下英文字母、数字0-9和下划线组成",
                  },
                ],
                initialValue: "admin",
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="Username"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("password", {
                rules: [{ validator: this.validatorPassword }],
              })(
                <Input
                  prefix={
                    <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  type="password"
                  placeholder="Password"
                />
              )}
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                Log in
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}

export default Form.create()(Login);
